import React from 'react';
import DataTable from 'lib/ConfigTable/Action';

export default class extends DataTable {
    setModelData = () => {
        const {dataTM} = this.models;
        const keys = dataTM.get('keys');
        let data = dataTM.get(`modelDataCollection.${keys.join('.')}`);

        if (data) {
            let list = [];

            if (dataTM.getType(data) === 'Array') {
                data.forEach((item, index) => {
                    list.push({
                        keyName: index,
                        keyType: dataTM.getType(item),
                        value: item,
                        showValue: this.makeDataToString(item)
                    });
                });
            } else {
                Object.keys(data).forEach((key) => {
                    list.push({
                        keyName: key,
                        keyType: dataTM.getType(data[key]),
                        value: data[key],
                        showValue: this.makeDataToString(data[key])
                    });
                }); 
            }

            dataTM.set({
                data: list
            });
        } else {
            dataTM.set({
                data: []
            });
        }
    }

    makeDataToString = (data) => {
        const {dataTM} = this.models;
        let dataType = dataTM.getType(data);
        
        if (['Object', 'Array'].includes(dataType)) {
            return JSON.stringify(data);
        } else {
            return data;
        }
    }

    editObject = (rowData, index) => {
        const {dataTM} = this.models;
        const keys = dataTM.get('keys');
        
        keys.push(rowData.keyName);

        dataTM.set({
            keys: [...keys]
        });

        this.setModelData();
    }

    delProp = (rowData, index) => {
        const {dataTM} = this.models;

        const [data, keys] = dataTM.get(['data', 'keys']);
        const timeKey = Date.now() + '';
        let currentData = dataTM.get(`modelDataCollection.${keys.join('.')}`);

        if (dataTM.getType(currentData) === 'Array') {
            currentData.splice(rowData.keyName, 1);
        } else {
            delete currentData[rowData.keyName]
        }

        dataTM.set({
            [keys.join('.')]: currentData
        });

        this.setModelData();
    }

    getDefaultValue = () => {
        return {
            'Object': {},
            'Array': [],
            'String': '',
            'Number': 0,
            'Undefined': null,
            'Null': null,
            'Boolean': true
        }
    }

    onFocus = (key, index) => {
        const {dataTM} = this.models;
        const [tableData, keys] = dataTM.get(['data', 'keys']);
        let prop = keys.join('.');
        let rowData = tableData[index];
        let currentObj = dataTM.get(`modelDataCollection.${prop}`);

        if (key === 'keyName') {
            this.currentEdit = rowData.keyName;
        }
    }

    beforeChangeValue = () => {
        return true;
    }

    afterChangeValue = (key, index) => {
        const {dataTM} = this.models;
        const [tableData, keys] = dataTM.get(['data', 'keys']);
        let prop = keys.join('.');
        let rowData = tableData[index];
        let currentObj = dataTM.get(`modelDataCollection.${prop}`);

        if (key === 'keyType') {
            let defaultValue = this.getDefaultValue()[rowData[key]];
            dataTM.set({
                [`modelDataCollection.${prop}[${rowData.keyName}]`]: defaultValue
            });

            this.setModelData();
        } else if (key === 'keyName') {
            clearTimeout(this.afterChangeTimer);
            this.afterChangeTimer = setTimeout(() => {
                let data = {};

                tableData.forEach((item) => {
                    data[item.keyName] = item.value;
                });

                dataTM.set({
                    [`modelDataCollection.${prop}`]: data
                });
            }, 100);
        } else if (key === 'showValue') {
            currentObj[rowData.keyName] = rowData.showValue;

            dataTM.set({
                [`modelDataCollection.${prop}`]: currentObj
            });
            this.setModelData();
        }
    }

    tuPrevProp = () => {
        const {dataTM} = this.models;
        const keys = dataTM.get('keys');

        keys.pop();

        dataTM.set('keys', keys);

        this.setModelData();
    }

    addNewProp = () => {
        const {dataTM} = this.models;

        const [data, keys] = dataTM.get(['data', 'keys']);
        const timeKey = Date.now() + '';
        let currentData = dataTM.get(`modelDataCollection.${keys.join('.')}`) || {};

        if (dataTM.getType(currentData) === 'Array') {
            currentData.push('');
        } else {
            currentData[`newProp_${timeKey}`] = '';
        }

        dataTM.set({
            [`modelDataCollection.${keys.join('.')}`]: currentData
        });

        this.setModelData();
    }

    renderCell = (col, rowData, index) => {
        if (col.dataIndex === 'showValue') {
            if (['Object', 'Array'].includes(rowData.keyType)) {
                return (
                    <span>
                        {rowData.showValue}
                    </span>
                )
            }
        }
    }
}